<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>

    <style>
      .box {
        width: 500px;
        height: 400px;
        margin: 100px auto;
        position: relative;
        cursor: pointer;
      }
      ul {
        margin: 0;
        list-style: none;
        padding: 0;
      }
      .img-box {
        position: absolute;
        top: 0;
        left: 0;
        /* display: none; */
      }
      .img-box li {
        display: none;
      }
      .img-box li.active {
        display: block;
      }
      .indicator-box {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        background-color: chartreuse;
      }
      .indicator-box li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: coral;
        margin: 5px;
      }
      .indicator-box li.current {
        background-color: red;
      }
      .btn {
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        font-size: 26px;
        top: calc(50% - 15px);
      }
      .next-btn {
        right: 0;
      }
      .btn:hover {
        background-color: rgb(32, 251, 197);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul class="img-box">
        <li class="active"><img src="img/1.jpg" alt="" /></li>
        <li><img src="img/2.jpg" alt="" /></li>
        <li><img src="img/3.jpg" alt="" /></li>
        <li><img src="img/4.jpg" alt="" /></li>
      </ul>

      <ul class="indicator-box">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      <div class="btn-box">
        <span class="btn prev-btn">&lt;</span>
        <span class="btn next-btn">&gt;</span>
      </div>
    </div>
    <script>
      var lis = document.querySelectorAll(".img-box li");
      var span = document.querySelectorAll("span");
      var dicator = document.querySelectorAll(".indicator-box li");
      var box = document.querySelector(".box");

      var index = 0;
      var lastindex = index;
      span[1].onclick = nextimg;
      span[0].onclick = previmg;

      function nextimg() {
        index = index == lis.length - 1 ? 0 : index + 1;
        showimg();
      }
      function previmg() {
        index = index == 0 ? lis.length-1 : index - 1;
        showimg();
      }
      function showimg() {
        lis[lastindex].classList.remove("active");
        dicator[lastindex].classList.remove("current");
        lis[index].classList.add("active");
        dicator[index].classList.add("current");
        lastindex = index;
      }

      var timer = setInterval(nextimg, 3000);
      box.onmouseenter = function() {
        clearInterval(timer);
      };
      box.onmouseleave = function() {
        timer = setInterval(nextimg, 3000);
      };

      for (var i = 0; i < dicator.length; i++) {
        dicator[i].index = i;
        dicator[i].onmouseenter = function() {
          index = this.index;
          showimg();
        };
      }
    </script>
   
  </body>
</html>
